src/components/Facility/FacilityBedCapacity.tsx (3)

Line range hint 14-14: Consider adding proper TypeScript types for props.

Using any type for props reduces type safety and makes the code more prone to runtime errors.

Consider defining a proper interface:

interface FacilityBedCapacityProps {
  facilityId: string;
}

export const FacilityBedCapacity = (props: FacilityBedCapacityProps) => {

---

Line range hint 19-24: Add loading and error states for capacityQuery.

The component doesn't handle loading or error states for the capacity query, which could lead to poor user experience.

Consider adding loading and error handling:

if (capacityQuery.isLoading) {
  return <LoadingSpinner />;
}

if (capacityQuery.error) {
  return <ErrorMessage error={capacityQuery.error} />;
}

---

Line range hint 93-103: Consider adding a tooltip for disabled state.

When the button is disabled, users should understand why they can't add more bed types.

Add a tooltip to improve user experience:

 <ButtonV2
   id="facility-add-bedtype"
   className="w-full md:w-auto"
   onClick={() => setBedCapacityModalOpen(true)}
   disabled={BED_TYPES.length === capacityQuery.data?.count}
   authorizeFor={NonReadOnlyUsers}
+  title={BED_TYPES.length === capacityQuery.data?.count ? "All bed types have been added" : ""}
 >

src/components/Form/Form.tsx (2)

17-17: Consider using undefined instead of void in the union type.

The static analysis tool correctly flags that void in a union type can be confusing. Using undefined would be more appropriate here as it better represents the absence of a return value.

-  onSubmit: (form: T, source?: string) => Promise<FormErrors<T> | void>;
+  onSubmit: (form: T, source?: string) => Promise<FormErrors<T> | undefined>;

🧰 Tools

🪛 Biome

[error] 17-17: void is confusing inside a union type.

Unsafe fix: Use undefined instead.

(lint/suspicious/noConfusingVoidType)

---

80-96: Consider simplifying and improving the value comparison logic.

While the current implementation works, it could be made more robust and maintainable.

-    if (typeof props.defaults[name] == typeof value) {
-      setIsDirty(props.defaults[name] !== value);
-    } else {
-      setIsDirty(JSON.stringify(props.defaults[name]) !== value);
-    }
+    const defaultValue = props.defaults[name];
+    const isChanged = typeof value === 'object' && value !== null
+      ? JSON.stringify(defaultValue) !== JSON.stringify(value)
+      : defaultValue !== value;
+    setIsDirty(isChanged);

src/components/Facility/StaffCapacity.tsx (1)

34-42: Consider adding proper TypeScript types.

While the reducer implementation is good, it would benefit from proper TypeScript types instead of using any.

-const doctorCapacityReducer = (state = initialState, action: any) => {
+type DoctorCapacityAction = 
+  | { type: 'set_form'; form: typeof initForm }
+  | { type: 'set_error'; errors: typeof initForm }
+  | { type: 'set_field'; name: string; value: string; error?: string };
+
+const doctorCapacityReducer = (
+  state = initialState,
+  action: DoctorCapacityAction
+) => {

src/components/Facility/BedCapacity.tsx (2)

260-260: Enhance internationalization by translating the 'Bed Type' label

In the SelectFormField component, the label is set to "Bed Type". Consider using the t function to translate this label for internationalization support.

Apply this diff to use the translation function:

- label="Bed Type"
+ label={t("bed_type")}

---

264-289: Ensure all form labels are translated for consistency

The labels for form fields such as "Total Capacity" and "Currently Occupied" are hardcoded. To maintain consistency and support multiple languages, consider using the t function for these labels.

Update the labels as follows:

- label="Total Capacity"
+ label={t("total_capacity")}
...
- label="Currently Occupied"
+ label={t("currently_occupied")}

src/components/Resource/ResourceDetailsUpdate.tsx (2)

Line range hint 35-36: Add missing required fields to validation

The title and reason fields are essential for the resource request but are not included in the requiredFields object. As a result, they are not validated for emptiness, which may allow submission of incomplete forms.

Consider adding title and reason to the requiredFields to ensure they are validated properly:

 const requiredFields: any = {
   approving_facility_object: {
     errorText: "Resource approving facility can not be empty.",
   },
+  title: {
+    errorText: "Request title cannot be empty.",
+  },
+  reason: {
+    errorText: "Description of request cannot be empty.",
+  },
   assigned_facility_type: {
     errorText: "Please Select Facility Type",
   },
 };

---

85-85: Check for unnecessary state management

The assignedUserLoading state is obtained from useQuery, but there is also an isLoading state managed separately. Ensure that loading states are handled consistently to avoid confusion or redundant renders.

Consider consolidating loading states or clearly distinguishing their purposes.

src/components/Shifting/ShiftDetailsUpdate.tsx (2)

174-177: Unused parameter source in handleSubmit function

The source parameter in the handleSubmit function is not used within the function body. Consider removing it to clean up the code.

Apply this diff to remove the unused parameter:

 const handleSubmit = async (
     form: typeof initForm,
-    source?: string,
     discharged = false,
 ) => {

---

344-366: Simplify setSelected function in FacilitySelect

The setSelected function can be simplified by directly updating the shifting_approving_facility_object without the redundant approving_facility field, which may not be necessary.

Apply this diff to simplify the function:

 setSelected={(obj: any) => {
     field("shifting_approving_facility_object").onChange({
         name: "shifting_approving_facility_object",
         value: obj,
     });
-    field("approving_facility").onChange({
-        name: "approving_facility",
-        value: obj.id,
-    });
 }}

Configuration used: CodeRabbit UI
Review profile: CHILL

-disabled={BED_TYPES.length === capacityQuery.data?.count}
+disabled={BED_TYPES.length === capacityQuery.data?.results.length}

#!/bin/bash
# Description: Check for consistent Form component usage with additionalButtons
# across the codebase

# Search for Form components with additionalButtons prop
rg -A 5 "additionalButtons=\[" --type typescript --type tsx

# Search for similar save-and-add-more patterns
ast-grep --pattern 'additionalButtons={[
  {
    id: "save-and-add-more",
    $$$
  }
]}'

#!/bin/bash
# Let's try a different approach to search for Form components with additional buttons

# Search for Form components with additionalButtons
rg -U "additionalButtons=\{.*\}" --type=tsx -A 5

# Also search for save-and-add-more pattern with more flexible matching
rg -U "save-and-add-more" --type=tsx -A 5

# Search for Form components to check overall usage pattern
rg "<Form\s+" --type=tsx -A 5

#!/bin/bash
# Let's try without specifying file types and use more general patterns

# Search for Form components with additionalButtons
rg -U "additionalButtons=\{.*\}"

# Search for save-and-add-more pattern
rg -U "save-and-add-more" -A 5

# Search for Form components usage
rg "<Form\s+" -A 5

#!/bin/bash
# Description: Check where 'breathlessness_level' errors are handled.

# Test: Search for usage of 'breathlessness_level' in error handling.
rg 'errors\[.*breathlessness_level.*\]'

src/components/Form/Form.tsx (2)

27-27: Consider using undefined instead of void in union type.

The static analysis tool correctly flags that void in a union type can be confusing. Consider using undefined for better type safety.

- onSubmit: (form: T, source?: string) => Promise<FormErrors<T> | void>;
+ onSubmit: (form: T, source?: string) => Promise<FormErrors<T> | undefined>;

🧰 Tools

🪛 Biome

[error] 27-27: void is confusing inside a union type.

Unsafe fix: Use undefined instead.

(lint/suspicious/noConfusingVoidType)

---

36-40: Consider enhancing type safety for additionalButtons.

The additionalButtons type is well-structured, but could benefit from using a discriminated union for better type safety.

- additionalButtons?: {
-   type: "submit" | "button";
-   label: string;
-   id: string;
- }[];
+ additionalButtons?: Array<
+   | { type: "submit"; label: string; id: string }
+   | { type: "button"; label: string; id: string; onClick: () => void }
+ >;

src/components/Facility/StaffCapacity.tsx (4)

37-45: Add TypeScript types for reducer state and actions.

While the reducer implementation is clean, it would benefit from proper TypeScript types for better type safety and maintainability.

-const doctorCapacityReducer = (state = initialState, action: any) => {
+interface DoctorCapacityState {
+  form: typeof initForm;
+  errors: typeof initForm;
+}
+
+type DoctorCapacityAction =
+  | { type: 'set_form'; form: typeof initForm }
+  | { type: 'set_error'; errors: typeof initForm }
+  | { type: 'set_field'; name: string; value: string; error?: string };
+
+const doctorCapacityReducer = (
+  state = initialState,
+  action: DoctorCapacityAction
+): DoctorCapacityState => {

---

87-101: Enhance count field validation.

While the validation logic is good, consider adding additional validation for the count field:

1. Ensure it's a valid integer
2. Add a reasonable maximum limit

 } else if (field === "count" && form[field] < 0) {
   errors[field] = "Staff count cannot be negative";
   validForm = false;
+} else if (field === "count") {
+  const count = Number(form[field]);
+  if (!Number.isInteger(count)) {
+    errors[field] = "Staff count must be a whole number";
+    validForm = false;
+  } else if (count > 1000) { // adjust limit as needed
+    errors[field] = "Staff count exceeds maximum limit";
+    validForm = false;
+  }
 }

---

146-148: Enhance loading state UI.

Replace the basic loading text with a proper loading indicator for better user experience.

-<div>Loading...</div>
+<div className="flex items-center justify-center p-4">
+  <LoadingSpinner /> {/* assuming you have a loading spinner component */}
+  <span className="ml-2">Loading staff capacity details...</span>
+</div>

---

187-195: Add HTML5 validation attributes to count field.

Enhance the count field with proper HTML5 validation attributes for better user experience and client-side validation.

 <TextFormField
   required
   id="count"
   label="Count"
   name="count"
   type="number"
+  min="0"
+  max="1000"
+  step="1"
   value={field("count").value}
   onChange={(e: any) => field("count").onChange(e)}
 />

src/components/Facility/BedCapacity.tsx (3)

Line range hint 153-204: Add error handling for API requests

The submission logic lacks proper error handling for API failures. This could lead to the loading state being stuck if an error occurs.

Add try-catch block and error handling:

  const handleSubmit = async (form: typeof initForm, source?: string) => {
    const valid = validateData(form);
    if (valid) {
      setIsLoading(true);
+     try {
        const bodyData = {
          room_type: Number(form.bedType),
          total_capacity: Number(form.totalCapacity),
          current_capacity: Number(form.currentOccupancy),
        };
        const { data } = await request(
          id ? routes.updateCapacity : routes.createCapacity,
          {
            pathParams: { facilityId, ...(id ? { bed_id: id.toString() } : {}) },
            body: bodyData,
          },
        );
        if (data) {
          // ... existing success handling ...
        }
+     } catch (error) {
+       Notification.Error({
+         msg: "Failed to update bed capacity",
+       });
+     } finally {
        setIsLoading(false);
+     }
    }
  };

---

268-292: Enhance form field accessibility

The number input fields need additional ARIA labels and better validation messaging for screen readers.

Add accessibility improvements:

  <TextFormField
    className="w-full"
    id="total-capacity"
    name="totalCapacity"
    label="Total Capacity"
    required
    type="number"
+   aria-label="Enter total bed capacity"
+   aria-describedby="total-capacity-hint"
    value={field("totalCapacity").value}
    onChange={(e: any) => field("totalCapacity").onChange(e)}
    error={state.errors.totalCapacity}
    min={1}
  />
  <TextFormField
    className="w-full"
    id="currently-occupied"
    label="Currently Occupied"
    required
    name="currentOccupancy"
    type="number"
+   aria-label="Enter current occupancy"
+   aria-describedby="current-occupancy-hint"
    value={field("currentOccupancy").value}
    onChange={(e: any) => field("currentOccupancy").onChange(e)}
    error={state.errors.currentOccupancy}
    min={0}
    max={state.form.totalCapacity}
  />

---

146-151: Optimize last bed type check

The effect to check for the last bed type could be simplified and made more efficient.

Simplify the logic:

  useEffect(() => {
-   const lastBedType =
-     bedTypes.filter((i: OptionsType) => i.disabled).length ===
-     BED_TYPES.length - 1;
+   const disabledCount = bedTypes.reduce((count, type) => 
+     count + (type.disabled ? 1 : 0), 0);
+   const lastBedType = disabledCount === BED_TYPES.length - 1;
    setIsLastOptionType(lastBedType);
  }, [bedTypes]);

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Description: Check error handling patterns in form submissions
# Look for consistent error handling patterns in form submission handlers

# Search for onSubmit implementations
rg -A 5 "onSubmit.*=.*async.*=>" --type typescript

# Search for form error handling patterns
rg -A 5 "FormErrors.*void" --type typescript

#!/bin/bash
# Search for form submission handlers and error handling patterns
rg -A 5 "onSubmit.*=.*async.*=>"
rg -A 5 "catch.*Error"

# Look for form-related error state management
rg -A 3 "setError|setFormError"

# Search for form submission implementations
ast-grep --pattern 'const $_ = async ($event: $_) => { $$$  }'

- } else if (field === "currentOccupancy" && Number(form[field] < 0)) {
+ } else if (field === "currentOccupancy" && Number(form[field]) < 0) {
  errors[field] = "Occupied cannot be negative";
  validForm = false;
} else if (
  field === "currentOccupancy" &&
  Number(form[field]) > Number(form.totalCapacity)
) {
  errors[field] = "Occupied must be less than or equal to total capacity";
  validForm = false;
}
- if (field === "totalCapacity" && Number(form[field]) === 0) {
+ if (field === "totalCapacity" && Number(form[field]) <= 0) {
  errors[field] = "Total capacity cannot be 0";
  validForm = false;
- } else if (field === "totalCapacity" && Number(form[field] < 0)) {
-   errors[field] = "Total capacity cannot be negative";
-   validForm = false;
}